<template>
  <div>
    <!-- 图片 -->
    <div class="header">
      <img src="../../assets/images/1.jpg" alt="" />
    </div>
    <!-- 动态数据--- -->
    <div class="info">
      <p class="title">
        <i></i>
        病毒信息
      </p>
      <div class="content">
        <p>{{ covid19Info.note1 }}</p>
        <p>{{ covid19Info.note2 }}</p>
        <p>{{ covid19Info.note3 }}</p>
        <p>{{ covid19Info.remark1 }}</p>
        <p>{{ covid19Info.remark2 }}</p>
        <p>{{ covid19Info.remark3 }}</p>
      </div>
    </div>
    <!-- 静态布局--信息 -->
    <!-- <div class="info">
      <p class="title">
        <i></i>
        病毒信息
      </p>
      <div class="content">
        <p>数据1xxxx</p>
        <p>数据1xxxx</p>
        <p>数据1xxx啦啦啦啦x</p>
        <p>数据1xxx啦啦啦啦x</p>
        <p>数据1xxx啦啦啦啦x</p>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // covid19Info:{}
    };
  },
  props: {
    covid19Info: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
};
</script>

<style lang="less" scoped>
.header img {
  width: 100%;
}
.info {
  padding: 0.2rem;
  background: #fff;
  border-bottom: 1px solid #f1f1f1;
}
.title {
  font-size: 0.3rem;
}

.title i {
  display: inline-block;
  width: 0.08rem;
  height: 0.32rem;
  margin-right: 0.06rem;
  vertical-align: middle;
  background: #4169e2;
}
.content {
  padding: 0.12rem 0.32rem;
}

.content p {
  font-size: 0.26rem;
  margin: 0.1rem 0;
  line-height: 0.38rem;
}
</style>